<template>
    <div id="foot">

        <div id="foot-fix" v-if="userLogin">
            <span>{{userLogin.userInfo.username}}</span>
            <span>|</span>
            <span  @click="exit">退出</span>
            <span>|</span>
            <span>反馈</span>
            <span>|</span>
            <span>回到顶部</span>
        </div>
        <div id="foot-fix" v-else>
            <span><router-link to="/login">登录</router-link></span>
            <span>|</span>
            <span><router-link to="/regist">注册</router-link></span>
            <span>|</span>
            <span>反馈</span>
            <span>|</span>
            <span>回到顶部</span>
        </div>

        <div id="foot-center">
            <div>
            <div class="fa fa-desktop border-circle"></div>
            <div>客户端</div>
        </div>
        <div>
            <div class="fa fa-tablet border-circle"></div>
            <div>触摸屏</div>
        </div>
         <div>
            <div class="fa fa-desktop border-circle"></div>
            <div>电脑版</div>
        </div>
        
        </div>
        <div id="copy">Copyright  2004-2017 京东JD.com </div>
        
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
    methods: {
        exit:function(){
            this.$store.dispatch("requestExit");
        }
    },
    computed: {
        ...mapState([
            "userLogin"
        ])
    }
}
        

</script>

<style scoped>
#foot{
    font-size: 12px;
}
    #foot-fix{
        text-align: center;
        height: 35px;
        line-height: 35px;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        margin: 4px 0;
    }
    #foot-fix span{
        font-size: 12x;
        color: deepskyblue;
        margin: 0 2vw;
        width: 100%;

    }
    #foot-center{
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-left: 15vw;
        margin-right: 15vw;
        padding: 10px;
    }
    .border-circle{
        width: 30px;
        height: 30px;
        border: 1px solid black;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
    }
    #copy{
        text-align: center;
        margin-bottom: 10px;
        color: whitesmoke;
        background-color: cornflowerblue;
        
    }
    a{
        width: 5vw;
    }
</style>